import React, { useState, useRef, useEffect } from 'react'
import Lottie from 'react-lottie';
import * as animationData from './data.json'
import * as animationData2 from './data2.json'
import * as animationData3 from './data3.json'
import * as animationData4 from './data4.json'
import * as animationData5 from './data5.json'
import * as animationData6 from './data6.json'
import * as animationData7 from './data7.json'
import style from './index.module.scss'

export default function(props={}){
    const [states,setStates]= useState({stop: false,pause: false})
    const [show,setShow]= useState(false)
    const [defaultOptions,setDefaultOptions]= useState({
        loop: false,
        autoplay: true,
        animationData: animationData.default,
        renderer: 'canvas',
      })
    const el = useRef()
      
    useEffect(()=>{
      if(show){
        el.current.anim.addEventListener('complete', (v) => {
          console.log('complete:')
        })
        el.current.anim.addEventListener('loopComplete',  (v) => console.log('loopComplete'));
        el.current.anim.addEventListener('enterFrame',  (v) =>{
          console.log('enterFrame')
        })
        el.current.anim.addEventListener("DOMLoaded", () => {
          console.log('DOMLoaded')
        })
      }
    },[defaultOptions,show])
  

  const loadingPosition = {
    position: 'fixed',
    left: '50%',
    top: '15%',
    width: '40%',
    height: '70%',
    marginLeft: '-20%',
    zIndex: 999,
  }
  
  const onShow= ()=>{
    setShow((show)=>!show)
  }
  const onStop= ()=>{
    el.current.anim.stop()
  }
  const onPause= ()=>{
    el.current.anim.pause()
  }
  const onPlay= ()=>{
    el.current.anim.play()
  }
  const onToggle= ()=>{
    el.current.anim.togglePause()
  }
  const goToAndStop= ()=>{
    el.current.anim.goToAndStop(120,false)
  }
  const setDirection= ()=>{
    el.current.anim.setDirection(-1)
  }
  const change= (type)=>{
      switch(type){
        case 1:
            setDefaultOptions((v)=>({...v,animationData: animationData.default}))
            break;
        case 2:
            setDefaultOptions((v)=>({...v,animationData: animationData2.default}))
            break; 
        case 3:
            setDefaultOptions((v)=>({...v,animationData: animationData3.default}))
            break; 
        case 4:
            setDefaultOptions((v)=>({...v,animationData: animationData4.default}))
            break; 
        case 5:
            setDefaultOptions((v)=>({...v,animationData: animationData5.default}))
            break; 
        case 6:
            setDefaultOptions((v)=>({...v,animationData: animationData6.default}))
            break; 
        case 7:
            setDefaultOptions((v)=>({...v,animationData: animationData7.default}))
            break; 
      }
    
  }
  if(typeof props.showBtn === "undefined"){ //显示测试按钮
    setShow(true)
  }
  return (
    <div>
        {
            props.showBtn?
            <button className={style.btn_isshow} onClick={onShow}>{props.btnText || "显示"}</button>
            : null
        }
        {
            show?
            <div>
                <button onClick={()=>change(1)}>1</button>
                <button onClick={()=>change(2)}>2</button>
                <button onClick={()=>change(3)}>3</button>
                <button onClick={()=>change(4)}>4</button>
                <button onClick={()=>change(5)}>5</button>
                <button onClick={()=>change(6)}>6</button>
                <button onClick={()=>change(7)}>7</button>
                <button onClick={onStop}>停止</button>
                <button onClick={onPause}>暂停</button>
                <button onClick={onPlay}>开始</button>
                <button onClick={onToggle}>toggle</button>
                <button onClick={goToAndStop}>goToAndStop</button>
                <button onClick={setDirection}>setDirection</button>
                <Lottie
                    options={defaultOptions}
                    style={loadingPosition}
                    isStopped={states.stop}
                    ref={el}
                    isPaused={states.pause} />
            </div>
            : null
        }
    </div>
  )
}